<template>
    <div ref="chartRef" style="width: 100%; height: 400px;"></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

type EChartsOption = echarts.EChartsOption;

// 引用图表容器
const chartRef = ref<HTMLDivElement | null>(null);

onMounted(() => {
    if (chartRef.value) {
        const chartDom = chartRef.value;
        const myChart = echarts.init(chartDom);

        const option: EChartsOption = {
            title: {
                text: '季度销售额',  // 设置标题
                left: 'left',  // 标题左对齐
                top: 'top'     // 标题上对齐
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow' // 设置阴影提示，适用于柱状图
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'value'  // 将 x 轴设置为数值类型（水平）
                }
            ],
            yAxis: [
                {
                    type: 'category', // 将 y 轴设置为类目类型（垂直）
                    data: ['一季度', '二季度', '三季度', '四季度'],
                }
            ],
            color: '#c9161b',
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',  // 设置柱状图宽度
                    data: [6000, 5000, 15000, 20000, 25000]
                }
            ]
        };

        myChart.setOption(option);
    }
});
</script>

<style scoped>
#chartRef {
    width: 100%;
    height: 400px;
    /* 可以根据需要调整图表容器的高度 */
}
</style>
